<!doctype html>
<html>
	<head>
		<title>Matrix digital rain</title>
		<meta charset="utf-8" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
		<style>
			@supports (padding-top: env(safe-area-inset-top)) {
				body {
					padding: 0;
					height: calc(100% + env(safe-area-inset-top));
				}
			}
			body {
				background: black;
				overflow: hidden;
				margin: 0;

				font-family: monospace;
				font-size: 2em;
				text-align: center;
			}

			canvas {
				width: 100vw;
				height: 100vh;
			}

			p {
				color: hsl(108, 90%, 70%);
				text-shadow: hsl(108, 90%, 40%) 1px 0 10px;
			}

			.notice {
				margin-top: 10em;
				animation: fadeInAnimation ease 3s;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

			@keyframes fadeInAnimation {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}

			.pill {
				display: inline-block;
				background: gray;
				border: 0.3em solid lightgray;
				font-size: 1rem;
				font-family: monospace;
				color: white;
				padding: 0.5em 1em;
				border-radius: 2em;
				min-width: 6rem;
				margin: 3em;
				text-decoration: none;
				cursor: pointer;
				text-transform: uppercase;
				font-weight: bold;
			}

			.blue {
				background: linear-gradient(skyblue, blue, black, black, darkblue);
				border-color: darkblue;
				color: lightblue;
			}

			.blue:hover {
				border-color: blue;
				color: white;
			}

			.red {
				background: linear-gradient(lightpink, crimson, black, black, darkred);
				border-color: darkred;
				color: lightpink;
			}

			.red:hover {
				border-color: crimson;
				color: white;
			}
		</style>
	</head>
	<body>
		<!--
			This is an implementation of the green code seen in The Matrix film and video game franchise.
			This project demonstrates five concepts:
					1. Drawing to floating point frame buffer objects, or 'FBO's,
						 for performing computation and post-processing
					2. GPU-side computation, with fragment shaders
						 updating two alternating FBOs
					3. Rendering crisp "vector" graphics, with a multiple-channel
						 signed distance field (or 'MSDF')
					4. Creating a blur/bloom effect from a texture pyramid
					5. Color mapping with noise, to hide banding

			For more information, please visit: https://github.com/Rezmason/matrix
		 -->
		<script type="module" src="js/main.js"></script>
	</body>
</html>
